<link rel="stylesheet" href="css/footer.css">
<div class="footer">
    <div class="footer1 forms">
        <div class="content clearfix">
            <img src="img/footer/boy.png" class="btn1" alt="立即注册">
            <p class="freeText">免费领取 <span>268元</span> 在线试听课</p>
            <form class="myForm3" id="myForm">
                <input type="text" name="channelAdid" class="channelAdid" value="" style="display:none">
                <input type="text" name='name' class="name" placeholder="请输入学生姓名">
                <input type="tel" name='phone' class="mobile" placeholder="请输入手机号">
                <select name="grade" class="grade">
                    <option value="请选择" selected style="display: none;color: #ccc;">年级</option>
                    <option value="一年级">一年级</option>
                    <option value="二年级">二年级</option>
                    <option value="三年级">三年级</option>
                    <option value="四年级">四年级</option>
                    <option value="五年级">五年级</option>
                    <option value="六年级">六年级</option>
                    <option value="七年级">七年级</option>
                    <option value="八年级">八年级</option>
                    <option value="九年级">九年级</option>
                </select>
                <select name="subject" class="kemu">
                    <option value="请选择" selected style="display: none;color: #ccc;">科目</option>
                    <option value="数学">数学</option>
                    <option value="语文">语文</option>
                    <option value="英语">英语</option>
                </select>
                <button class='submit' type='button'>立即试听</button>
            </form>
        </div>
    </div>
    <div class="footer2">
        <div class="content clearfix">
            <div class="FL">
                <p>联系电话： <span>400-888-8888</span></p>
                <p>上海市长宁区凯德龙之梦雅士大厦19D</p>
                <p>上海氪涵教育信息科技有限公司</p>
                <p>(沪ICP备18049023号-1)</p>
                <img src="img/footer/icon.png" alt="图标">
            </div>
            <div class="FR">
                <p>
                    <a href="">家长社区</a>
                    <a href="aboutUs.html">关于我们</a>
                    <a href="userAgreement.html">用户协议</a>
                    <a href="privacyStatement.html">隐私条款</a>
                    <a href="commonSoftware.html">常用软件</a>
                </p>
                <div class="code">
                    <img src="img/footer/code.png" alt="二维码">
                    <p>关注后即可加入家长群关注社群</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(function () {
    // 选择年级科目select显示颜色的变化Start
    if ($("#myForm .grade").val() == "请选择") {
      $("#myForm .grade").css("color", "#aaa");
      $("#myForm .grade option").css("color", "#515151");
    } else {
      $("#myForm .grade").css("color", "#515151");
      $("#myForm .grade option").css("color", "#515151");
    }

    if ($("#myForm .kemu").val() == "请选择") {
      $("#myForm .kemu").css("color", "#aaa");
      $("#myForm .kemu option").css("color", "#515151");
    } else {
      $("#myForm .kemu").css("color", "#515151");
      $("#myForm .kemu option").css("color", "#515151");
    }
    $("#myForm select").on("change", function () {
      if ($("#myForm .grade").val() == "请选择") {
        $("#myForm .grade").css("color", "#aaa");
        $("#myForm .grade option").css("color", "#515151");
      } else {
        $("#myForm .grade").css("color", "#515151");
        $("#myForm .grade option").css("color", "#515151");
      }

      if ($("#myForm .kemu").val() == "请选择") {
        $("#myForm .kemu").css("color", "#aaa");
        $("#myForm .kemu option").css("color", "#515151");
      } else {
        $("#myForm .kemu").css("color", "#515151");
        $("#myForm .kemu option").css("color", "#515151");
      }
    })

    // 选择年级科目select显示颜色的变化End
    //底部表单提交
    $('#myForm .submit').on('click', function () {
      var $this = $(this);
      // $("#myForm .channelAdid").val(GetQueryString("channelAdid"));
      $("#myForm .channelAdid").val("6IXRORRXNW");
      var mobileReg = /^1\d{10}$/;//手机号码验证
      var nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
      var formData = $('#myForm').serialize();
      $.ajax({
        type: 'get',
        url: CMSAPI + '/register/leads',
        data: formData,
        // dataType: "jsonp",
        // jsonp: "jsoncallback",
        contentType: "application/x-www-form-urlencoded",
        timeout: 5000,
        // 发起请求前就调用
        beforeSend: function (data) {
          if (!$("#myForm .name").val()) {
            $("#myForm .name").attr({placeholder: "名字不能为空"}).focus().val("");
            return false;
          }
          if (!nameReg.test($("#myForm .name").val())) {
            $("#myForm .name").val("");
            $("#myForm .name").attr({placeholder: "请输入正确姓名"}).focus().val("");
            return false;
          }
          if (!mobileReg.test($("#myForm .mobile").val())) {
            $(this).attr("input::-webkit-input-placeholder", "color", "#FF0000");
            $("#myForm .mobile").attr({placeholder: "手机号不正确"}).focus().val("");
            return false;
          }
          if ($("#myForm .grade").val() == "请选择" || $("#myForm .kemu").val() == "请选择") {
            alert("请选择年级和科目");
            return false;
          }
          // $this.html('正在提交...').addClass("disabled").attr("disabled", true);
          $this.addClass("disabled").attr("disabled", true);
        },
        success: function (data) {
          if (data.code == 100) {
            $("#myForm .name").val("");
            $("#myForm .mobile").val("");
            $("#myForm .grade").val("请选择");
            $("#myForm .kemu").val("请选择");
            $("#myForm .grade,#myForm .kemu").css("color", "#aaa");
            $("#myForm grade option,#myForm .kemu option").css("color", "#515151");
            alert('报名成功!');
          } else if (data.code == 101) {
            alert(data.msg);
            $this.removeClass('disabled').attr("disabled", false);
            $("#myForm .name").val("");
            $("#myForm .mobile").val("");
            return false;
          }
          else {
            alert("预约失败！");
          }
        },
        complete: function () { // 请求完成时会调用
          $(".tip").fadeOut(1500);
          $("#myForm .name,#myForm .mobile").css("border", 0);
          console.log(2);
          // 还原状态
          $("#myForm input").val("");
          $this.removeClass('disabled').attr("disabled", false);
        },
        error: function () {
          console.log(3);
        }
      });
    });
    //底部表单提交end
  })
  //底部固定
  window.onload = function () {
    var viewH = $(window).height();//可见高度
    var bottomTop = $(".forms").offset().top;//表单距离顶部
    var formHeight = $(".forms").height(); //表单高度
    // 判断表单固定
    if (bottomTop - formHeight - $(document).scrollTop() > viewH) {
      $(".footer .forms").addClass("fixedBottom");
    } else {
      $(".footer .forms").removeClass("fixedBottom");
    }
    $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();
      //滚动时表单固定
      if (bottomTop + formHeight - scrollTop > viewH) {
        $(".footer .forms").addClass("fixedBottom");
      } else {
        $(".footer .forms").removeClass("fixedBottom");
      }
    });
  }
</script>